<template>
  <div class="message">
    <div class="head">
      <!-- <span @click="back">＜</span>
            <span>消息中心</span>
      <span style="width:60px"></span>-->
      <van-nav-bar title="消息中心" left-arrow @click-left="back" />
    </div>
    <div class="call">
      <div class="zan">
        <div class="left">
          <div class="pit">
            <img src="@/assets/images/user/user-tell.png" alt />
          </div>
          <div class="send">
            <h3>系统通知</h3>
            <p>哈皮巴斯得!祝你生日快乐</p>
          </div>
        </div>
        <div class="right">一个月前</div>
      </div>
      <div class="zan">
        <div class="left">
          <div class="pit">
            <img src="@/assets/images/user/user-zan.png" alt />
          </div>
          <div class="send">
            <h3>赞</h3>
            <p>一个赞都不给我!</p>
          </div>
        </div>
        <div class="right">一个月前</div>
      </div>
      <div class="zan">
        <div class="left">
          <div class="pit">
            <img src="@/assets/images/user/user-talk.png" alt />
          </div>
          <div class="send">
            <h3>评论</h3>
            <p>暂时还没有收到评论</p>
          </div>
        </div>
        <div class="right">一个月前</div>
      </div>
    </div>
    <div class="all">
      <h2>全部私信</h2>
      <ul class="call">
        <router-link :to="`/user/messageList/${ele.id}`" tag="li" v-for="ele in list" :key="ele.id">
          <div class="zan bot">
            <div class="left">
              <div class="pit last">
                <img :src="ele.imgs" alt />
              </div>
              <div class="send">
                <h3>{{ele.names}}</h3>
                <p>{{ele.tips}}</p>
              </div>
            </div>
            <div class="right">
              <p>{{ele.times}}</p>
              <p>{{ele.num}}</p>
            </div>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  computed: {},
  created() {
    this.list = this.$store.state.messageList;
  },
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" >
[class*="van-hairline"]::after {
  position: static;
}

.van-nav-bar {
  background-color: #23262d;

  .van-nav-bar__title {
    color: #ffffff;
  }
}
.van-nav-bar__text {
  color: #ffffff;
}
.van-nav-bar .van-icon {
  color: #ffffff;
}
</style>
<style scoped lang="scss">
.message {
  overflow: hidden;
  height: 100%;

  color: rgba(255, 255, 255, 1);
  .call {
    margin-top: 50px;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    width: calc(100% - 40px);
    margin: 0 auto;
    .zan {
      width: 100%;
      margin: 15px auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        text-align: left;
        .pit {
          width: 44px;
          height: 44px;
          position: relative;
          border-radius: 50%;
          background-color: #f9c34a;
          margin-right: 15px;
          img {
            width: 20px;
            height: 23px;
            position: absolute;
            left: 12px;
            top: 11px;
          }
        }
        .send {
          overflow: hidden;
          h3 {
            margin: 5px;
            color: #f9c34a;
          }
          p {
            margin: 5px;
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
      .right {
        color: rgba(255, 255, 255, 0.5);
      }
    }
    .zan:nth-child(2) .pit {
      background-color: #ef8833;
    }
    .zan:nth-child(3) .pit {
      background-color: #6548a9;
    }
  }
  .all {
    h2 {
      text-align: left;
      width: calc(100% - 40px);
      margin: 0 auto;
    }
    .call {
      margin-top: 20px;
      li {
        width: 100%;
        // margin: 10px;
        .zan.bot {
          margin: 10px 0;
          .left {
            .pit.last {
              border-radius: 0;
              background-color: transparent;
              border: 1px solid grey;
              img {
                width: 44px;
                height: 44px;
                left: 0;
                top: 0;
              }
            }
          }
          .right {
            :nth-child(2) {
              width: 14px;
              height: 14px;
              border-radius: 50%;
              background-color: #f9c34a;
              text-align: center;
              margin-left: 30px;
              margin-top: 3px;
            }
          }
        }
      }
    }
  }
}
</style>
